<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: lai_hq@qq.com
 * @Date: 2022-03-21 09:03:58
 * @LastEditors: lai_hq@qq.com
 * @LastEditTime: 2022-08-05 16:38:35
-->
<template>
    <a-breadcrumb style="padding-top: 16px">
        <!-- :routes="breadcrumbList" -->
        <a-breadcrumb-item v-for="item in breadcrumbList" :key="item.path">
            <router-link
                :to="{
                    path: item.path,
                    query: {
                        ...$route.query
                    }
                }"
            >
                <!-- <home-outlined v-if="index==0" /> -->
                <!-- <component v-else :is="item.icon" /> -->
                {{ item.breadcrumbName }}
            </router-link>
        </a-breadcrumb-item>
    </a-breadcrumb>
</template>

<script lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
    setup() {
        const route = useRoute()
        const router = useRouter()
        const breadcrumbList = ref([])
        const getRouterName = () => {
            const matched = route.matched.map((item) => {
                return {
                    path: item.path,
                    icon: item.meta && item.meta.icon,
                    breadcrumbName: item.meta && item.meta.title
                }
            })
            // const first = matched[1]
            // if (first && first.path == '/dashboard') {
            matched.splice(0, 1)
            // }
            breadcrumbList.value = matched
        }
        watch(
            () => {
                return router.currentRoute.value.path
            },
            () => {
                getRouterName()
            }
        )

        onMounted(() => {
            getRouterName()
        })
        return {
            breadcrumbList
        }
    }
}
</script>
